//购物车 页面  

//判断是否登录
let username = getCookie('username');
if (!username) {
  layer.msg('请先登录');
  setTimeout(() => {
      location.href = './login.html';
  }, 2000);
  
} else {
    //获取本地购物车数据
    let cartStr = localStorage.getItem('data');
  if (!cartStr) { 
        $('.mi_main>.common').html(`<div class="kong">
        <div class="left">
           <img src="../img/gwc.png">
       </div>
       <div class="right">
           <h2>您的购物车还是空的！</h2>
           <p>登录后将显示您之前加入的商品</p>
           <a href="./login.html" style=" background: #ff6700;">立即登录</a>
           <a href="../pages/all.html" style="color: #ff6700;">马上购物</a>
       </div>
    
</div>`)
} else {
        // 购物车有数据
        let cartArr = JSON.parse(cartStr);
        let ids1 = cartArr.map(v => {
            if (v.username === username) {
              return v.id;
            }
          })
          let ids2 = ids1.filter(v => v !== undefined);
          if (ids2.length === 0) {
        $('.mi_main>.common').html(`<div class="kong">
        <div class="left">
           <img src="../img/gwc.png">
       </div>
       <div class="right">
           <h2>您的购物车还是空的！</h2>
           <p>登录后将显示您之前加入的商品</p>
           <a href="./login.html" style=" background: #ff6700;">立即登录</a>
           <a href="../pages/all.html" style="color: #ff6700;">马上购物</a>
       </div>
    
</div>`);           
       }else{
        //    console.log(ids2);
        let ids = ids2.join();
    //    根据id查找
    async function fn() {
        let res = await pAjax({
          url: '../server/cart.php',
          data: { ids },
          dataType: 'json'
        })
        let { data } = res;
        // console.log(data);
            let strHtml = `  <table  cellspacing="0">
            <thead>
                <tr>
                    <th><input type="checkbox" name="selectAll">全选</th>
                    <th>商品名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>`;//表格头部
            //表格身体
            // 获取加入购物车的对应数量
            data.forEach(v => {
                let num = cartArr.find(t=>t.username === username && t.id === v.id).n
                strHtml += `
                    <tr index = ${v.id} stock=${v.stock}>
                        <td><input type="checkbox" name="selectOne"></td>
                        <td style="color: #424242;font-size: 18px;"><img src="${v.imgpath.split('=====')[0]}"><span >${v.name}</span></td>
                        <td><span>${v.price}</span> 元</td>
                        <td>
                            <div class="number" data-stock="10" data-id="21">
                                <button class="btn btn-default reduce">-</button>
                                <input type="text" name="number" value="${num}">
                                <button class="btn btn-default add">+</button>
                            </div>
                        </td>
                    <td style="color: #ff6700;" ><span class="jg">${num*v.price}</span> 元</td>
                        <td><span class="remove">×</span></td>
                    </tr>`
                
            });
            strHtml += `
            </tbody>
            </table>
            <div class="settlement">
            <div class="js">
                <a href="#">继续购物</a><span>|</span>
                <p>已选择<i>0</i>件</p>
            </div>
            <div class="jsright">
                <p>合计：<i>0</i>元</p>
                <a class="btn btn-warning" href="order.html">去结算</a></td>
            </div>
           </div>
            `;//拼接结算栏
            $('.mi_main>.common').html(strHtml);//渲染购物页面表格
            select();
            //调用+和-
            addAndReduce()
            // 删除事件
            bindRemove();
        }
        fn();
       }
    }
}

// 计算商品总数和总价格
function getNumAndTotal(){
    let num = 0; //总数
    let total = 0; //总价
    $('input[name=selectOne]').each((i,v)=>{
        if($(v).prop('checked')){ //判断是否勾选
            num += $(v).parent().parent().find('input[name=number]').val()-0;
            total += $(v).parent().parent().find('.jg').text()-0;
        }
    })
    $('.js>p>i').text(num);
    $('.jsright>p>i').text(total);
}


//点击勾选事件
function select(){
// 全选
$('input[name=selectAll]').click(function () {
    $('input[name=selectAll]').prop('checked', $(this).prop('checked'));
    $('input[name=selectOne]').prop('checked', $(this).prop('checked'));
    getNumAndTotal();
})

$('input[name=selectOne]').click(function () {
    // 将jq集合伪数组转为真数组
    let arr = [...$('input[name=selectOne]')];
    let flag = arr.every(v => v.checked);
    $('input[name=selectAll]').prop('checked',flag);
    // 统计总价和总数
    getNumAndTotal();
  })
}

//+ 和 - 
function addAndReduce(){
    //点击+号的事件函数
    $('.add').click(function(){
    // 解除-按钮的禁用
    $('.reduce').prop('disabled',false);
    let num = $(this).prev().val()-0;
    let stock = $(this).parent().parent().parent().attr('stock')-0;
    num++;
    if(num>stock){
        num = stock;
        layer.msg('超出库存');
        $(this).prop('disabled',true);
    }
    $(this).prev().val(num);
    //改变本地购物车的数量
    let id = $(this).parent().parent().parent().attr('index');
    let data = JSON.parse(localStorage.getItem('data'));
    let car = data.find(v=>v.username === username && v.id === id);
    car.n = num;
    //渲染到本地购物车
    localStorage.setItem('data',JSON.stringify(data));
    

     //改变本地购物车的结算单行总价格
     let total = num * ($(this).parent().parent().prev().find('span').text()-0)
     $(this).parent().parent().next().find('span').html(total);
    //  改变本地购物车的结算全部勾选商品总价格
    getNumAndTotal();
})


//点击-号的事件函数
$('.reduce').click(function(){
    //解除禁用
    $('.add').prop('disabled',false);
    let num = $(this).next().val()-0;
    num--;
    if(num<1){
        num = 1;
        layer.msg('购买数量至少为1');
        $(this).prop('disabled',true);
    }
    $(this).next().val(num);
    //改变本地购物车的数量
    let id = $(this).parent().parent().parent().attr('index');
    let data = JSON.parse(localStorage.getItem('data'));
    let car = data.find(v=>v.username === username && v.id === id);
    car.n = num;
    //渲染到本地购物车
    localStorage.setItem('data',JSON.stringify(data));
    

     //改变本地购物车的结算单行总价格
     console.log(num);
     let total = num * ($(this).parent().parent().prev().find('span').text()-0)
     console.log(total);
     $(this).parent().parent().next().find('span').html(total);
    //  改变本地购物车的结算全部勾选商品总价格
    getNumAndTotal();
})
//失去焦点事件
$('input[name=number]').blur(function(){
    let n = parseInt($(this).val()); 
    let stock = $(this).parent().parent().parent().attr('stock')-0;
    if(n<1 || n> stock){
        layer.msg('购买数量超出');
      // $(this).val(1);
    }
  })
}


//删除按钮移除事件
function bindRemove(){
$('.remove').click(function(){
    let index = layer.confirm('你真的要删除嘛？',{icon:6,btn:['确定','取消']},()=>{
        //确定
        //获取删除这一行的id
        let id = $(this).parent().parent().attr('index');
        //获取本地购物车数据
        let data = JSON.parse(localStorage.getItem('data'));
        let resData = data.filter(v => !(v.username === username && v.id === id));
        // console.log(resData);
        // 保存到本地购物车
        localStorage.setItem('data',JSON.stringify(resData));
        let resData2 = resData.filter(v=>v.username === username);
        if(!resData2.length){
            location.reload();//刷新页面
        }
        //删除对应的行
        $(this).parent().parent().remove();
        //关闭弹出层
       layer.close(index);
    },()=>{
        //取消
        layer.msg('喜欢就买，心动不如行动')
        return false;
    })
    
})
}




